import classNames from "classnames";
import styles from "./index.module.scss";
import MainTitle from "@/components/MainTitle";
import TitleWhithLine from "@/components/TitleWhithLine";
import Slider from 'react-slick';
import "./index.scss"
// import 'slick-carousel/slick/slick.css';
// import 'slick-carousel/slick/slick-theme.css';

const Introduction = () => {
    const settings = {
        dots: false,
        infinite: true,
        slidesToShow: 10,
        slidesToScroll: 1,
        autoplay: true,
        speed: 4500,
        autoplaySpeed: 2000,
        cssEase: "linear",
        className: "partnerBox",
    };

    const list = [{
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/58e6ac5fd661c2e0ef82606ff3fce9ce4755bccb167e302b65c1af762447f93f.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }, {
        imgPath: 'https://landscape.cncf.io/logos/8cbfe9bcfba18cc9712bda70565c8598eee930663533395b6cc350618c3e5b02.svg',
        path: '/second'
    }]
    return (
        <div className={classNames('container', styles.introductionBox)}>
            <MainTitle title="Organization Introduction"/>

            <div className={styles.desBox}>
                The Open Geospatial Alliance (OGA) is a non-profit international organization dedicated to building an open, collaborative, and inclusive geospatial technology ecosystem. OGA provides a global spatiotemporal information infrastructure service platform for promoting the sharing, reuse, and dissemination of open-source software and data. Through its efforts, OGA fosters an open community for sharing and advancing geospatial academic and technological achievements.
            </div>
            <div className={classNames('flex_box  flex_between align_center', styles.totalBox)}>
                <div>
                    <span>29</span>
                    <i>Open Codes</i>
                </div>
                <div>
                    <span>36</span>
                    <i>Open Datasets</i>
                </div>
                <div>
                    <span>13</span>
                    <i>Open Model Images</i>
                </div>
            </div>
            <TitleWhithLine title="WHO USES OGA" />
            <div className={styles.scroolBox}>
                <Slider {...settings}>
                    {list.map((item, index) => {
                        return <div key={index + '_use'} className={styles.singelBox} onClick={() => {
                            // router.push(item.path)
                        }}>
                            <img src={item.imgPath} />
                        </div>
                    })}
                </Slider>
            </div>
        </div>
    )
}
export default Introduction;